<template>
    <div class="setModal" v-show="isShow">
        <div class="setBoard">
            <div class="close" @click="isShow = false">
                <i class="el-icon-circle-close"></i>
            </div>
            <div class="content">
                <div class="pulsesVal">
                    <span class="label">每行项数:</span>
                    <el-input-number v-model="form.number" controls-position="right" :min="1" :max="15" size="small"
                        :controls="false" style="width:180px"></el-input-number>
                </div>
                <div class="pulsesVal">
                    <span class="label">数据更新间隔:</span>
                    <el-input-number v-model="form.interval" controls-position="right" :min="3" size="small"
                        :controls="false" style="width:180px"></el-input-number>
                    <span style="color:#fff;font-size:18px;font-weight:650;margin-left:8px">秒</span>
                </div>
                <div class="pulsesVal">
                    <span class="label"></span>
                    <el-checkbox v-model="form.uphincludeCloseTime">UPH包含关灯时间</el-checkbox>
                </div>
                <div style="text-align:center">
                    <el-button type="primary" @click="confirm">确定</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {
        setSearchCache
    } from '@/api/produceController'
    export default {
        data() {
            return {
                form: {},
                isShow: false
            }
        },
        methods: {
            setSearchCacheFn: async function (data) {
                await setSearchCache(data)
            },
            open(cacheInfo){
                this.form = cacheInfo
                this.isShow = true
            },
            //确定
            confirm() {
                this.setSearchCacheFn({
                    cacheName: 'oeeCount:set',
                    jsonValue: JSON.stringify(this.form),
                    type: 0
                }).then(() => {
                    this.$emit('confirm', this.form)
                    this.isShow = false
                })
            },
        }
    }
</script>

<style lang="less" scoped>
    .setModal {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        background-color: rgba(47, 79, 79, .5);
    }

    .setBoard {
        position: absolute;
        width: 550px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background-color: #302c2c;
        box-shadow: 0 0 50px #9b9999;

        .close {
            position: absolute;
            right: 15px;
            top: 15px;
        }

        .close {
            font-size: 35px;
            color: #fff;
            cursor: pointer;
        }

        .content {
            padding: 80px 60px 40px;
            height: 100%;

            .pulsesVal {
                display: flex;
                align-items: center;

                .label {
                    font-size: 18px;
                    font-weight: 650;
                    color: #fff;
                    padding-right: 15px;
                    width: 160px;
                    text-align: right;
                    display: inline-block;
                }

                padding-bottom: 20px;

                ::v-deep .el-input-number.is-without-controls .el-input__inner {
                    font-size: 20px;
                }
            }

            .pulsesVal {
                ::v-deep .el-checkbox__inner {
                    width: 20px;
                    height: 20px;
                    border: 2px solid #797979;
                    background: transparent;
                }

                ::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
                    background: none;
                    border-color: #797979;
                }

                ::v-deep .el-checkbox__input.is-focus .el-checkbox__inner {
                    border-color: #797979;
                }

                ::v-deep .el-checkbox__inner::after {
                    height: 10px;
                    left: 6px;
                    width: 4px;
                }

                ::v-deep .el-checkbox__inner:hover {
                    border-color: none;
                }

                ::v-deep .el-checkbox__input.is-checked+.el-checkbox__label,
                ::v-deep .el-checkbox__label {
                    font-size: 18px;
                    font-weight: 650;
                    color: #fff;
                }
            }

            ::v-deep .el-button {
                background-color: #124e6c;
                border-color: #124e6c;
                padding: 10px 35px;

                span {
                    margin-left: 0;
                }
            }
        }
    }
</style>